<!--
 * @Author: 高瑞寒 15932717091@163.com
 * @Date: 2022-05-17 22:48:58
 * @LastEditTime: 2022-05-20 21:49:28
 * @LastEditors: 高瑞寒 15932717091@163.com
 * @Description:
-->
<template>
  <el-dropdown trigger="click" @command='handleSelectLanguage' id="guide-lang">
    <el-tooltip
      :effect="effect"
      :content="$t('navBar.lang')"
      placement="bottom"
    >
    <template>
      <svg-icon icon="language"></svg-icon>
    </template>

    </el-tooltip>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item :disabled="$store.getters.language === 'zh'" command="zh">中文</el-dropdown-item>
        <el-dropdown-item :disabled="$store.getters.language === 'en'" command="en">English</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script setup>
import { useI18n } from 'vue-i18n'
import { useStore } from 'vuex'
import { ElMessage } from 'element-plus'
const store = useStore()

// eslint-disable-next-line no-undef
defineProps({
  effect: {
    type: String,
    default: 'dark',
    validate: (v) => {
      return ['light', 'dark'].indexOf(v) !== -1
    }
  }
})

const i18n = useI18n()
const handleSelectLanguage = (v) => {
  i18n.locale.value = v
  store.commit('setLanguage', v)
  ElMessage.success(i18n.t('toast.switchLangSuccess'))
}
</script>

<style lang="scss" scoped></style>
